<template>
  <div class="column home-container fit pages">
    <div class="q-ma-md title">{{ $t('home.featuredTitle') }}</div>
    <featured-video-container
      :videos="videos"
      v-for="(videos, index) in featuredVideos"
      :key="index"
    >
      <template v-slot:append v-if="index == 0">
        <div class="fit extra-row">
          <div class="row justify-between items-center">
            <div class="title q-px-md q-my-md">
              {{ $t('home.newTranslationTitle') }}
            </div>
            <q-btn
              color="accent"
              :label="$t('common.viewMore')"
              flat
              :to="{ name: 'NewTranslations' }"
              no-caps
            />
          </div>
          <div class="extra-container q-pa-md">
            <small-video-card
              v-for="video in videosByLanguage"
              :key="video.id"
              :video="video"
              :ratio="1 / 1.2"
            />
          </div>
        </div>
      </template>
      <template v-slot:append v-else-if="index == 1">
        <div class="fit extra-row" v-if="currentUser">
          <div class="row justify-between items-center">
            <div class="title q-px-md q-my-md">
              {{ $t('home.creatorsOrFollow') }}
            </div>
            <q-btn
              color="accent"
              label="view more"
              flat
              :to="{ name: 'Followed' }"
            />
          </div>
          <div class="extra-container q-pa-md">
            <small-video-card
              v-for="video in followedVideos"
              :key="video.id"
              :video="video"
              :ratio="1 / 1.2"
            />
          </div>
        </div>
      </template>
    </featured-video-container>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed, onBeforeMount } from 'vue';
import FeaturedVideoContainer from './FeaturedVideoContainer.vue';
import SmallVideoCard from 'components/video/SmallVideoCard.vue';
import Video from 'src/models/Video';
import { arrTrans } from 'src/utils/common';
import { useUserStore } from 'src/stores/user-store';
import { useVideoStore } from 'src/stores/video-store';

export default defineComponent({
  components: {
    FeaturedVideoContainer,
    SmallVideoCard,
  },
  setup() {
    const userStore = useUserStore();
    const videoStore = useVideoStore();
    const currentUser = computed(() => userStore.currentUser);
    const featuredVideos = computed<Array<Video[]>>(() =>
      arrTrans(9, videoStore.featuredVideos)
    );
    const videosByLanguage = computed<Video[]>(
      () => videoStore.videosByLanguages
    );
    const followedVideos = computed<Video[]>(() => videoStore.followedVideos);
    onBeforeMount(async () => {
      await videoStore.getFeaturedVideos();
      let languages = [navigator.language];
      if (currentUser.value) {
        languages = currentUser.value.languages;
      }
      await videoStore.getVideosByLanguage({
        page: 0,
        size: 6,
        languages: languages,
      });
      await videoStore.getVideoByFollowed({
        page: 0,
        size: 6,
      });
    });
    return {
      currentUser,
      featuredVideos,
      videosByLanguage,
      followedVideos,
    };
  },
});
</script>
<style lang="sass" scoped>

.home-container
  .title
    font-size: 22px
    font-weight: bold
  .extra-row
    position: relative
    padding-bottom: 1em
    .title
      font-size: 20px
      font-weight: bold
  .extra-row:before
    background-color: #1c1c1c
    position: absolute
    width: 200vw
    left: -100vw
    z-index: -1
    content: ""
    height: 100%
  .extra-container
    width: 100%
    display: inline-grid
    grid-template-columns: repeat(6, 1fr)
    grid-template-rows: 1fr
    grid-gap: 1em
    background-color: #1c1c1c
</style>
